<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id" :class="selectId===item.id?'color':''" @click="changEId(item.id)">
                <div @click="toPage('/' + item.text)">{{ item.name }}</div>
            </li>
        </ul>
    </div>    
</template>

<script>
export default {
    data(){
        return{
            list:[
                {
                    id: 1,
                    name: "一句诗词",
                    text: "poetry",
                    status: true
                },
                {
                    id: 2,
                    name: "励志句子",
                    text: "sentence",
                    status: false
                },
                {
                    id: 3,
                    name: "毒鸡汤",
                    text: "chickensoup",
                    status: false
                }
            ],
            selectId: 1
        }
    },
    methods: {
        changEId(val){
            this.selectId = val;
        },
        toPage(val){
            this.$router.push(val);
        }
    }
}
</script>

<style scoped>
ul{
    margin-top: 30px;
}
li{
    margin: 8px;
    color: #b8b8b8;
    cursor: pointer;
}
li:hover{
    color: #4caf50;
}
.color{
    color: #4caf50;
}
</style>